<style>
#user-add {
	padding: 20px 25px 25px 0;
}

#user-add .layui-treeSelect .ztree li a, .ztree li span {
	margin: 0 0 2px 3px !important;
}

@media screen and (min-width: 768px) {
	.layui-input-block {
		width: 60%;
	}
	#search-hrinfo-btn {
		float: right;
		margin-top: -40px;
	}
}
</style>
<div class="layui-fluid" id="user-add">
	<form class="layui-form" action="" lay-filter="user-add-form">
		<div class="layui-form-item">
			<label class="layui-form-label febs-form-item-require">用户名：</label>
			<div class="layui-input-block">
				<input type="text" id="username-input" name="username" minlength="2" maxlength="10"
					lay-verify="range|username" autocomplete="off" class="layui-input">
			</div>
			<button class="layui-btn" type="button" id="search-hrinfo-btn">Search HR Info</button>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">手机：</label>
			<div class="layui-input-block">
				<input type="tel" name="mobile" lay-verify="phone" autocomplete="off" class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">邮箱：</label>
			<div class="layui-input-block">
				<input type="text" name="email" lay-verify="email" maxlength="50" autocomplete="off"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label febs-form-item-require">角色：</label>
			<div class="layui-input-block">
				<select name="roleId" lay-verify="required" xm-select-direction="down" xm-select="user-add-role"
					xm-select-skin="default">
				</select>
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label">部门：</label>
			<div class="layui-input-block">
				<input type="text" name="deptId" id="user-add-dept" lay-filter="user-add-dept"
					class="layui-input">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label febs-form-item-require">状态：</label>
			<div class="layui-input-block">
				<input type="radio" name="status" value="1" title="有效" checked="">
				<input type="radio" name="status" value="0" title="禁用">
			</div>
		</div>
		<div class="layui-form-item">
			<label class="layui-form-label febs-form-item-require">性别：</label>
			<div class="layui-input-block">
				<input type="radio" name="sex" value="0" title="男性">
				<input type="radio" name="sex" value="1" title="女性">
				<input type="radio" name="sex" value="2" title="保密" checked="">
			</div>
		</div>
		<div class="layui-form-item layui-form-text">
			<label class="layui-form-label">备注：</label>
			<div class="layui-input-block">
				<textarea name="description" maxlength="100" class="layui-textarea"></textarea>
			</div>
		</div>
		<div class="layui-form-item febs-hide">
			<button class="layui-btn" lay-submit="" lay-filter="user-add-form-submit" id="submit"></button>
			<button type="reset" class="layui-btn" id="reset"></button>
		</div>
	</form>
</div>

<script>
	var treeData;
	layui.use([ 'febs' ,'form' ,'formSelects' ,'validate' ,'treeSelect' ], function(){
		var $ = layui.$ , febs = layui.febs , layer = layui.layer , formSelects = layui.formSelects , treeSelect =
				layui.treeSelect , form = layui.form , $view = $('#user-add') , validate = layui.validate;
		form.verify(validate);
		form.render();
		formSelects.render();
		treeSelect.render({
			elem : $view.find('#user-add-dept') ,
			type : 'get' ,
			data : ctx + 'dept/select/tree' ,
			placeholder : '请选择' ,
			search : false ,
			success : function(res){
				treeData = res;
			}
		});
		formSelects.config('user-add-role', {
			searchUrl : ctx + 'role' ,
			response : {
				statusCode : 200
			} ,
			beforeSuccess : function(id, url, searchVal, result){
				var data = result.data;
				var tranData = [ ];
				for (var i = 0; i < data.length; i++) {
					tranData.push({
						name : data[i].roleName ,
						value : data[i].roleId
					})
				}
				result.data = tranData;
				return result;
			} ,
			error : function(id, url, searchVal, err){
				console.error(err);
				febs.alert.error('获取角色列表失败');
			}
		});
		form.on('submit(user-add-form-submit)', function(data){
			febs.post(ctx + 'user', data.field, function(){
				layer.closeAll();
				febs.alert.success('新增用户成功，初始密码为 1234qwer');
				$('#febs-user').find('#query').click();
			});
			return false;
		});
		$("#search-hrinfo-btn").on("click", function(){
			var t = $view.find("input[name='username']").val();
			if (!t) {
				layer.tips('请先填写用户名', '#username-input', {
					tips : [ 1 ,'#0FA6D8' ]
				//还可配置颜色
				});
			} else {
				febs.get(ctx + 'fdiHrInfo/' + t, null, function(res){

					initUserValue(res.data);
				})
			}
		});
		function initUserValue(data){
			var deptId = find(treeData.data, data.department, "deptCode");
			form.val("user-add-form", {
				"username" : data.employeeNo ,
				"mobile" : data.mobile ,
				"email" : data.email ,
				"deptId" : deptId ,
				"status" : data.status ,
				"sex" : data.sex ,
				"description" : data.description
			});
			treeSelect.checkNode('user-add-dept', deptId);
		}
		function find(arr, arg, key){
			for ( var i in arr) {
				if (arg == arr[i]["data"][key])
					return arr[i]["data"]["deptId"];
				else if (arr[i]["children"]) {
					find(arr[i]["children"], arg, key)
				}
			}
			return null;
		}
	});
</script>